<template>
  <div>
      <canvas @click="getVier" id="mycanvans" width="180" height="40"></canvas>
  </div>
</template>
<script setup>
import {onMounted} from 'vue'
import {getVerifyCode} from '@/api/login'

let getVier=async ()=>{
  let res=await    getVerifyCode()
  console.log(res);//验证码
  toDraw(res.data)
}

onMounted(()=>{
    getVier();

})

let toDraw=(str)=>{//str  "1mnc"
   // 获取canvas元素
    const canvas = document.getElementById('mycanvans')
    // 获取canvas上下文
    const ctx = canvas.getContext('2d')
  // 清除画布
    ctx.clearRect(0,0,180,40)
    // 绘制背景
    ctx.fillStyle = "rgb(212,237,185)"
    ctx.fillRect(0,0,180,40)
    // 绘制文字
    for(var i=0;i<str.length;i++){
         // 绘制文字
        ctx.font = `${ranNum(14,25)}px Arial`
        // ctx.fillStyle = randowColor()
          ctx.fillStyle = "red"
        // 文字加旋转
        // ctx.rotate(ranNum(-5,5)*Math.PI/360)
        ctx.fillText(str[i], i*40+ranNum(5,15), ranNum(20,40))
    }
   
    // 绘制20条干扰线
    // for(var j=0;j<20;j++){
    //     ctx.strokeStyle = randowColor()
    //     ctx.beginPath()
    //     ctx.moveTo(ranNum(0,180),ranNum(0,40))
    //     ctx.lineTo(ranNum(0,180),ranNum(0,40))
    //     ctx.stroke()
    // }

    // 绘制100个干扰点
    // for(var k=0;k<100;k++){
    //     ctx.fillStyle = randowColor()
    //     ctx.beginPath()
    //     ctx.arc(ranNum(0,180),ranNum(0,40),1,0,2*Math.PI)
    //     ctx.fill()
    // }
    

}
// a-b随机数
let ranNum=(a,b)=>{
  return Math.floor(Math.random()*(b-a+1)+a)
}
let randowColor=()=>{
  return `rgb(${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)},${Math.floor(Math.random()*256)})`
}
</script>
<style lang="scss">
  #mycanvans{
    
    background: rgb(212,237,185);
  }
</style>